<%= render :partial => "/tr8n/common/lightbox_header" %>
<%
  examples = [
    {:label => "Hello World", :tokens => "", :alt => "The simplest possible example. No tokens used"},
    {:label => "{tr8n} is awesome!", :tokens => "{'tr8n':'TR8N'}", :alt => "Uses simple token to demonstrate subsitution."},
    {:label => "You have {count|| message, messages}!", :tokens => "{'count':5}", :alt => "Uses count token and numeric rule"},
    {:label => "Dear {user}, your gender is in the subject!", :tokens => "{'user':{'subject':'male', 'value':'Michael'}}", :alt => "Uses user token and gender rule."},
    {:label => "Dear {user}, your gender is in an object!", :tokens => "{'user':{'subject':{'gender': 'male'}, 'value':'Michael'}}", :alt => "Uses user token and gender rule."},
    {:label => "{profile| Joined on}:", :tokens => "{'profile': {'subject': 'male', 'value': 'Michael'}}", :alt => "Establishes phrase dependency on the profile token."},
    {:label => "{user} updated {user| his, her} profile.", :tokens => "{'user': {'subject': 'male', 'value': 'Michael'}}", :alt => "Uses the token twice for the user name and for the phrase elements."},
    {:label => "{user| He, She} likes tr8n.", :tokens => "{'user': {'subject': 'male', 'value': 'Michael'}}", :alt => "Uses the token for dependency only."},
    {:label => "Some [bold: decoration] stuff!", :tokens => "{'bold': '<strong>{$0}</strong>'}", :alt => "Uses decoration token."},
    {:label => "Using default [bold: decorations]!", :tokens => "", :alt => "Uses decoration token with a fallback default decoration."},
    {:label => "More default [italic: decorations]!", :tokens => "", :alt => "Uses decoration token with a fallback default decoration."},
    {:label => "[link: Click here] is a link default decoration!", :tokens => "{'link':{'href':'http://www.google.com'}}", :alt => "Uses decoration token with a fallback default decoration."},
    {:label => "You have [link: {count|| message, messages}] in your mailbox!", :tokens => "{'link':{'href':'http://www.google.com'}, 'count': 5}", :alt => "Uses decoration and data tokens together."},
  ]
%>

<div class="inner">
	<div class="hd">
		<span style="float:right;">
		<%=link_to_function(image_tag("tr8n/close.gif"), "hideLightbox();")%>
		</span>
		Tr8n Client SDK JavaScript Examples
	</div>

	<div class="bd">
		<div style="font-size:12px; color:grey; padding-bottom:5px;">
			Click on the example to use it in the test tool.
		</div>

		<%= form_tag("", :class => "tr8n") do %>
			<div style="height:370px; overflow:auto;">
			<table class="admin_table">
				<tr>
				<th>Label</th>
				<th>Tokens</th>
				</tr>

				<% examples.each_with_index do |ex, index| %>
					<tr style='cursor:pointer;' onClick="top.useExample(Tr8n.value('tr8n_example_label_<%=index%>'), Tr8n.value('tr8n_example_tokens_<%=index%>'))" title="<%=ex[:alt]%>">
						<td>
							<%=hidden_field_tag("tr8n_example_label_#{index}", ex[:label]) %>
							<%=h(ex[:label])%>
						</td>
						<td>
							<%=hidden_field_tag("tr8n_example_tokens_#{index}", ex[:tokens]) %>
							<%=h(ex[:tokens])%>
						</td>
					</tr>
				<% end %>

			</table>
			</div>
		<% end %>
	</div>
</div>
<%= render :partial => "/tr8n/common/lightbox_footer" %>
